<template>
	<view class="register">
		<view class="register-top">
			<text>注册转客盟</text>
			<text>全新的体验，开启世界大门！</text>
		</view>
		<view class="register-input">
			<view class="register-phone input">
				<text class="iconfont icon-phone"></text>
				<input type="number" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="input">
				<text class="iconfont icon-code"></text>
				<input class="register-code" type="number" v-model="code" placeholder="请输入验证码" />
				<button class="send-code" :loading="loading" :disabled="status" @click="sendCode()">
					<text>{{timeTxt}}</text>
				</button>
			</view>
			<view class="btns">
				<view class="btn" @click="verCode()">
					<button type="default" :loading="submitLoading" :disabled="submitLoading">下一步</button>
				</view>
			</view>
		</view>
		<view class="agreement" :class="$isPC ? 'IsPC':''">
			<view class="checkbox" @click="checkbox(isAgreement)">
				<text v-if="isAgreement" class="iconfont icon-check"></text>
				<text class="check" v-else></text>
			</view>
			<text class="read" @click="checkbox(isAgreement)">请仔细阅读并同意</text>
			<text class="color" @click="goPage('服务协议','service_rule')">《服务协议》</text>
			<text>和</text>
			<text class="color" @click="goPage('隐私政策','privacy_rule')">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import {
		entranceCode,
		verification
	} from '@/api/entrance.js'
	export default {
		name: "register",
		components: {
		},
		data() {
			return {
				phone: "",
				code:"",
				timeTxt:"发送",
				status:false,
				loading:false,
				submitLoading:false,
				isAgreement:false
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: "/pages/entrance/login/login"
			})
		},
		onLoad(option) {
			if(option.code){
				uni.setStorageSync("share_code",option.code)
			}
		},
		methods: {
			//获取验证码
			async sendCode() {
				if(this.status){
					return;
				}
				if(!this.phone){
					this.$msg("手机号不能为空！")
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
				    this.$msg("手机号格式不正确！")
					return;
				} 
				if(!this.isAgreement){
					this.$msg("请阅读并同意服务协议")
					return
				}
				this.loading = true;
				let res = await entranceCode({phone:this.phone});
				if(res.code===1){
					//进行倒计时
					this.countDown(60);
					this.loading = false;
				}else{
					this.$msg(res.msg);
					this.loading = false;
				}
			},
			//倒计时
			countDown(time){
				this.status = true;
				let clear = setInterval(()=>{
					time--;
					this.timeTxt = time+'s';
					if(time<=0){
						clearInterval(clear);
						this.status = false;
						this.timeTxt = "发送";
					}
				},1000)
			},
			//验证code
			async verCode(){
				if(!this.phone){
					this.$msg("手机号不能为空！")
					return;
				}
				if(!this.code){
					this.$msg("验证码不能为空！")
					return;
				}
				this.submitLoading = true;
				let res = await verification({phone:this.phone,
				code:this.code,deviceId:uni.getSystemInfoSync().deviceId});
				if(res.code === 1){
					uni.navigateTo({
						url: "/pages/entrance/next/next"
					})
					this.submitLoading = false;
				}else{
					this.$msg(res.msg);
					this.submitLoading = false;
				}
			},
			//同意协议
			checkbox(bool){
				this.isAgreement = !bool;
			},
			goPage(name,keyword){
				uni.navigateTo({
					url:'/pages/public/agreement/agreement?name='+name+'&keyword='+keyword
				})
			}
		}
	}
</script>

<style scoped lang="less" src="./register.less">
</style>
